import * as d3 from "d3";

import { useEffect, useRef } from "react";
import Weather, { weathers } from "../../domains/weather";

const LinePlot = () => {
  const wrapper = useRef(null);
  const bounds = useRef(null);
  const line = useRef(null);
  const gx = useRef(null);
  const gy = useRef(null);

  const dimensions = {
    width: window.innerWidth * 0.9,
    height: 400,
    margins: {
      top: 15,
      right: 15,
      bottom: 40,
      left: 60,
    },
    boundedWidth: 0,
    boundedHeight: 0,
  };
  dimensions.boundedWidth =
    dimensions.width - dimensions.margins.left - dimensions.margins.right;
  dimensions.boundedHeight =
    dimensions.height - dimensions.margins.top - dimensions.margins.bottom;

  const yAccessor = (weather: Weather) => weather.temperatureMax;
  const tempDomain = d3.extent(weathers, yAccessor);
  const yScale = d3.scaleLinear(tempDomain as number[], [
    dimensions.boundedHeight,
    0,
  ]);

  const parseDate = d3.timeParse("%Y-%m-%d");
  const xAccessor = (weather: Weather) => parseDate(weather.date);
  //   const xAccessor = (weather: Weather) => weather.time;
  const timeDomain = d3.extent(weathers, xAccessor);
  const xScale = d3.scaleTime(timeDomain as Date[], [
    0,
    dimensions.boundedWidth,
  ]);

  const lineGenerator = d3.line<Weather>(
    (weather) => xScale(xAccessor(weather)!),
    (weather) => yScale(yAccessor(weather))
  );
  //   const lineGenerator = d3
  //     .line<Weather>()
  //     .x((w) => xScale(xAccessor(w)!))
  //     .y((w) => yScale(yAccessor(w)));

  useEffect(
    () => void d3.select(gx.current).call(d3.axisBottom(xScale)),
    [gx, xScale]
  );
  useEffect(
    () => void d3.select(gy.current).call(d3.axisLeft(yScale)),
    [gy, yScale]
  );

  return (
    <div ref={wrapper}>
      <svg width={dimensions.width} height={dimensions.height}>
        <g
          ref={bounds}
          width={dimensions.boundedWidth}
          height={dimensions.boundedHeight}
        >
          <g
            ref={gx}
            transform={`translate(${dimensions.margins.left},${
              dimensions.boundedHeight + dimensions.margins.top
            })`}
          />
          <g
            ref={gy}
            transform={`translate(${dimensions.margins.left},${dimensions.margins.top})`}
          />
          <path
            ref={line}
            fill="none"
            stroke="#af9358"
            strokeWidth="1.5"
            transform={`translate(${dimensions.margins.left},${dimensions.margins.top})`}
            d={lineGenerator(weathers)!}
          ></path>
          <g fill="white" stroke="currentColor" strokeWidth="1.5">
            {weathers.map((d, i) => (
              <circle
                key={i}
                cx={xScale(xAccessor(d)!)}
                cy={yScale(yAccessor(d))}
                transform={`translate(${dimensions.margins.left},${dimensions.margins.top})`}
                r="1.5"
                onClick={() => console.log(d.date + " " + d.temperatureMax)}
              />
            ))}
          </g>
        </g>
      </svg>
    </div>
  );
};

export default LinePlot;
